Layouts এবং Partials

Web Development - এএসপি ডট (ASP.Net) - ASP.Net এর Razor Syntax |

ASP.Net MVC এবং ASP.Net Core MVC অ্যাপ্লিকেশনগুলোতে Layouts এবং Partials ব্যবহৃত হয় সাধারণভাবে পুনঃব্যবহারযোগ্য UI অংশ তৈরি করার জন্য। এই দুটি কনসেপ্ট অ্যাপ্লিকেশনের ভিউ লেয়ারের কাঠামোকে আরও পরিষ্কার এবং পুনঃব্যবহারযোগ্য করে তোলে। এখানে আমরা বিস্তারিতভাবে Layouts এবং Partials এর কাজ এবং ব্যবহারের পদ্ধতি আলোচনা করব।


Layouts

Layouts একটি সাধারণ পেজ কাঠামো বা টেমপ্লেট হিসেবে কাজ করে, যা সমস্ত পেজে পুনরায় ব্যবহার করা হয়। এটি একটি common structure প্রদান করে, যেমন: হেডার, ফুটার, ন্যাভিগেশন বার, যা একাধিক ভিউ বা পেজে ব্যবহৃত হতে পারে।

Layout ব্যবহার করার সুবিধা:

  • কোড পুনঃব্যবহার: হেডার, ফুটার, নেভিগেশন বার একাধিক পেজে একবার ব্যবহার করলেই হয়।
  • কনসিস্টেন্সি: সব পেজে একই লেআউট ব্যবহারের ফলে কনসিস্টেন্ট ইউজার ইন্টারফেস প্রদান করা যায়।

Layout সেটআপ

  1. _Layout.cshtml ফাইল তৈরি:

    • সাধারণত, Views/Shared/_Layout.cshtml নামক ফাইলটি Shared ফোল্ডারে রাখা হয় এবং এটি অ্যাপ্লিকেশনের মূল লেআউট হিসেবে কাজ করে।
    • এখানে সাধারণত HTML, CSS, এবং JavaScript কোড থাকে যা প্রতিটি পেজে ব্যবহৃত হয় (যেমন: হেডার, ফুটার, সাইডবার)।

    উদাহরণ (প্রাথমিক _Layout.cshtml):

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>@ViewData["Title"]</title>
        <link rel="stylesheet" href="~/css/site.css" />
    </head>
    <body>
        <header>
            <nav>
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/About">About</a></li>
                    <li><a href="/Contact">Contact</a></li>
                </ul>
            </nav>
        </header>
    
        <main>
            @RenderBody()
        </main>
    
        <footer>
            <p>© @DateTime.Now.Year - My ASP.Net Application</p>
        </footer>
    </body>
    </html>
    
  2. Layout ব্যবহার করা:

    • প্রতিটি ভিউতে লেআউট ব্যবহার করতে, @Layout ডিরেকটিভ ব্যবহার করতে হয়। সাধারণত, এটি ভিউ ফাইলের শীর্ষে ব্যবহার করা হয়।

    উদাহরণ:

    @layout "_Layout.cshtml"
    
    • যদি আপনি ASP.Net Core MVC ব্যবহার করেন, তাহলে এটি সাধারনভাবে Views/_ViewStart.cshtml ফাইলে ডিফাইন করা হয়:
    @{
        Layout = "_Layout";
    }
    
  3. RenderBody():
    • লেআউট ফাইলে @RenderBody() ডিরেকটিভের মাধ্যমে মূল কনটেন্ট (যে ভিউটি ব্যবহার হচ্ছে) সেটি ইনজেক্ট করা হয়। প্রতিটি ভিউ RenderBody থেকে নিজের কন্টেন্ট পাঠায়।

Partials

Partials হল ছোট ভিউ অংশ যা কোনও নির্দিষ্ট UI ফিচার বা উপাদান পুনঃব্যবহারযোগ্য করতে ব্যবহৃত হয়। পার্শিয়াল ভিউগুলি সাধারণত একাধিক স্থানে ব্যবহার করা হয়। উদাহরণস্বরূপ, একটি product list বা login form একটি পার্শিয়াল ভিউ হতে পারে, যা অনেক পেজে ব্যবহার করা হবে।

Partial ব্যবহার করার সুবিধা:

  • কোড পুনঃব্যবহার: একাধিক ভিউতে একই UI কম্পোনেন্ট ব্যবহারের জন্য পার্শিয়াল ভিউ ব্যবহার করা হয়।
  • অধিক সংগঠিত কোড: ছোট ছোট অংশে ভিউ ভাগ করে কোডের পরিস্কারতা এবং রক্ষণাবেক্ষণ সহজ করা হয়।

Partial তৈরি ও ব্যবহার

  1. Partial ভিউ তৈরি করা:

    • সাধারণত, পার্শিয়াল ভিউগুলি Views/Shared ফোল্ডারে রাখা হয়। এগুলি .cshtml ফাইল হয়।

    উদাহরণ: _ProductList.cshtml নামে একটি পার্শিয়াল ভিউ তৈরি করা।

    @model IEnumerable<MyApp.Models.Product>
    <div class="product-list">
        @foreach (var product in Model)
        {
            <div class="product-item">
                <h3>@product.Name</h3>
                <p>@product.Description</p>
                <span>@product.Price</span>
            </div>
        }
    </div>
    
  2. Partial ভিউ ব্যবহার করা:

    • আপনি যে ভিউতে পার্শিয়াল ভিউ ব্যবহার করতে চান, সেখানে @Html.Partial() বা @await Html.PartialAsync() ডিরেকটিভ ব্যবহার করতে হবে।

    উদাহরণ:

    @Html.Partial("_ProductList", Model.Products)
    
    • @Html.Partial() সাধারণত সিঙ্ক্রোনাস পার্শিয়াল রেন্ডারিং জন্য ব্যবহৃত হয়, তবে @await Html.PartialAsync() অ্যাসিঙ্ক্রোনাস পার্শিয়াল রেন্ডারিং এর জন্য ব্যবহৃত হয় (যখন ডেটা লোড হতে পারে)।

    উদাহরণ (Asynchronous):

    @await Html.PartialAsync("_ProductList", Model.Products)
    

Layout এবং Partial এর পার্থক্য

বৈশিষ্ট্যLayoutPartial
ব্যবহারসমস্ত পেজে সাধারণ কাঠামো প্রদাননির্দিষ্ট UI অংশ পুনঃব্যবহার
কোড বিভাজনসাধারণ পেজ কাঠামো (হেডার, ফুটার, সাইডবার)ছোট ভিউ অংশ (ফর্ম, প্রোডাক্ট লিস্ট)
কোড পুনঃব্যবহারএকাধিক পেজে লেআউট পুনঃব্যবহার করা হয়পার্শিয়াল ভিউ একাধিক স্থানে ব্যবহার করা হয়
প্রধান কাজপুরো পেজের কাঠামো সেট করাছোট অংশে UI উপাদান প্রদর্শন

সারাংশ

  • Layouts মূলত অ্যাপ্লিকেশনের পুরো পেজের কাঠামো নির্ধারণ করে, যেখানে আপনার অ্যাপ্লিকেশনের সাধারণ উপাদানগুলো যেমন হেডার, ফুটার, নেভিগেশন বার থাকে।
  • Partials ছোট, পুনঃব্যবহারযোগ্য ভিউ অংশ হিসেবে কাজ করে, যেগুলি একাধিক পেজে ব্যবহার করা যায়।

এই দুটি কনসেপ্ট ব্যবহার করে আপনি আপনার ASP.Net প্রজেক্টের UI কে আরো পরিষ্কার, সংগঠিত এবং পুনঃব্যবহারযোগ্য করে তুলতে পারবেন।

Content added By
Promotion